---
import "@/styles/global.scss";
import HeadMeta from "@/components/HeadMeta.astro";
import Header from "@/components/Header/index.astro";
import Background from "@/components/Background/index.astro";
import Footer from "@/components/Footer/index.astro";
import cfg from "blog.config";
import GetCurrentPageSetting from "@/utils/GetCurrentPageSetting";
import WhiteModule from "@/components/WhiteModule.astro";
import LeftBottomMenu from "@/components/LeftBottomMenu/index.astro";
import "github-markdown-css/github-markdown.css";

export interface Props {
  content: Record<string, any>;
}

const { header, footer, background, setMinHeight } = GetCurrentPageSetting(
  Astro.url
);

const { content } = Astro.props;

const {
  color: { light, dark },
} = cfg;
---

<style
  define:vars={{
    "l-background-default": light.backgroundDefault,
    "l-background-active-default": light.backgroundActiveDefault,
    "l-text-default": light.textDefault,
    "l-tips-default": light.tipsDefault,
    "d-background-default": dark.backgroundDefault,
    "d-background-active-default": dark.backgroundActiveDefault,
    "d-text-default": dark.textDefault,
    "d-tips-default": dark.tipsDefault,
  }}
>
  body {
    --background-default: var(--l-background-default);
    --background-active-default: var(--l-background-active-default);
    --text-default: var(--l-text-default);
    --tips-default: var(--l-tips-default);
  }

  html.dark > body {
    --background-default: var(--d-background-default);
    --background-active-default: var(--d-background-active-default);
    --text-default: var(--d-text-default);
    --tips-default: var(--d-tips-default);
  }
</style>

<style lang="scss">
  html.dark {
    .md-wrapper {
      .markdown-body {
        --color-prettylights-syntax-comment: #8b949e;
        --color-prettylights-syntax-constant: #79c0ff;
        --color-prettylights-syntax-entity: #d2a8ff;
        --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
        --color-prettylights-syntax-entity-tag: #7ee787;
        --color-prettylights-syntax-keyword: #ff7b72;
        --color-prettylights-syntax-string: #a5d6ff;
        --color-prettylights-syntax-variable: #ffa657;
        --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
        --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
        --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
        --color-prettylights-syntax-carriage-return-text: #f0f6fc;
        --color-prettylights-syntax-carriage-return-bg: #b62324;
        --color-prettylights-syntax-string-regexp: #7ee787;
        --color-prettylights-syntax-markup-list: #f2cc60;
        --color-prettylights-syntax-markup-heading: #1f6feb;
        --color-prettylights-syntax-markup-italic: #c9d1d9;
        --color-prettylights-syntax-markup-bold: #c9d1d9;
        --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
        --color-prettylights-syntax-markup-deleted-bg: #67060c;
        --color-prettylights-syntax-markup-inserted-text: #aff5b4;
        --color-prettylights-syntax-markup-inserted-bg: #033a16;
        --color-prettylights-syntax-markup-changed-text: #ffdfb6;
        --color-prettylights-syntax-markup-changed-bg: #5a1e02;
        --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
        --color-prettylights-syntax-markup-ignored-bg: #1158c7;
        --color-prettylights-syntax-meta-diff-range: #d2a8ff;
        --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
        --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
        --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
        --color-fg-default: #c9d1d9;
        --color-fg-muted: #8b949e;
        --color-fg-subtle: #484f58;
        --color-canvas-default: #0d1117;
        --color-canvas-subtle: #161b22;
        --color-border-default: #30363d;
        --color-border-muted: #21262d;
        --color-neutral-muted: rgba(110, 118, 129, 0.4);
        --color-accent-fg: #58a6ff;
        --color-accent-emphasis: #1f6feb;
        --color-attention-subtle: rgba(187, 128, 9, 0.15);
        --color-danger-fg: #f85149;
      }
    }
  }

  .get_min_height {
    min-height: calc(100% - 9rem);
    padding-top: 4rem;
  }

  .md-wrapper {
    width: 70%;
    margin: 3rem auto;
    padding: 2rem;

    .markdown-body {
      padding: 0 2rem;

      :global(img) {
        height: unset !important;
        margin-top: 0.1rem;
        margin-bottom: 0.1rem;
        box-shadow: 0 0 5px 1px var(--background-active-default);
      }
    }
  }

  @media screen and (max-width: 992px) {
    .md-wrapper {
      width: 90%;
      padding: 2rem 0;

      .markdown-body {
        padding: 1rem;
      }
    }
  }
</style>

<html lang="zh">
  <head>
    <HeadMeta title={`${content.title} - `} />
    <link
      rel="stylesheet"
      href={`${cfg.WebsiteSettings.base}/fonts/posts/iconfont.css`}
    />
  </head>
  <body>
    {header!.hidden ? null : <Header PositionTitle={`${content.title} - `} />}
    <div id="ScrollMark"></div>
    <main class={`${setMinHeight ? "get_min_height" : ""} md-wrapper`}>
      <slot name="before-markdown" />
      <WhiteModule>
        <div class="markdown-body">
          <slot />
        </div>
      </WhiteModule>
      <slot name="after-markdown" />
    </main>
    <Background cfg={background!} />
    {footer!.hidden ? null : <Footer content={footer!.content!} />}
    <LeftBottomMenu components={["Toc", "BackToTop"]} />
  </body>
</html>
